"use client";
import { useEffect, useRef } from "react";
import Three from "@/lib/three";

export default function Dashboard() {
  const canvasRef = useRef<HTMLDivElement>(null);

  const init = () => {
    if (canvasRef.current) {
      const three = new Three(canvasRef.current, true);

      // gui
      if (three.gui) {
        three.gui.add(three.camera.position, "x").name("camera-position-x");
        three.gui.add(three.camera.position, "y").name("camera-position-y");
        three.gui.add(three.camera.position, "z").name("camera-position-z");
      }

      // three.addGltf();

      console.log(three);
    }
  };

  useEffect(() => {
    init();
  }, []);

  return <div ref={canvasRef} className="h-screen w-screen bg-white"></div>;
}
